Sync with react.dev @ 7c36f7ac - #970

* Clean up and expand fragment ref docs

* Add cached intersection observer usage example

* Expand focus example to show search

* Small clean ups

* Add FragmentInstance operations reference list

* Add reference to scrollIntoView operation

* Migrate examples to sandpack

Bumps button contrast to match the treatment on reactnative.dev.

Dark mode:
- primary text: dark:text-secondary (#404756) -> dark:text-gray-90 (#23272F)
- secondary border: #404756 -> #4E5769 (matches RN's rgb(78,86,104))

Light mode:
- secondary border: #D9DBE3 -> #BCC1CD (matches RN's rgb(188,193,205))

gray-90 keeps a subtle cyan tint on the teal button, per review feedback
(gray-95 was too flat).

* Claude use docs attempt

* Human updates

* Address review feedback

* Address additional review feedback

* Split Pitfall and DeepDive, clarify recreation examples

* Reorder DeepDive: prose before correct example

* Add Reading a Promise from context section

* Address review feedback and align DeepDive with RSC docs style

* Drop inaccurate claim about blocking page rendering

* Address feedback

* Address feedback: clarify use() accepts Promise or context

* Apply suggestion from @rickhanlonii

* Update src/content/reference/react/use.md

Co-authored-by: Ricky <[email protected]>

* [use] Add Pitfall on refetching Promises from context in RSCs

---------

Co-authored-by: Aurora Scharff <[email protected]>
Co-authored-by: Aurora Scharff <[email protected]>

* fix: update use.md pitfall to mention that bypassing use can corrupt React's internal state tracking

* Apply suggestion from @rickhanlonii

* Apply suggestion from @rickhanlonii

* Apply suggestion from @rickhanlonii

* Apply suggestion from @rickhanlonii

* Update use.md with caution on bypassing `use`

Add warning about bypassing `use` and its effects on React Suspense.

* Apply suggestion from @rickhanlonii

* Update guidance on using the `use` hook with Promises

Clarify usage of `use` hook regarding Promise handling.

* Clarify usage of `use` with Promises

---------

Co-authored-by: Ricky <[email protected]>

* Fix broken internal link in Component reference (anchor)

* chore: trigger CLA check

Co-authored-by: Daksh Dhami <[email protected]>

Co-authored-by: Daksh Dhami <[email protected]>
Co-authored-by: Sebastian Sebbie Silbermann <[email protected]>
Co-authored-by: Claude Opus 4.7 <[email protected]>
Co-authored-by: Sebastian "Sebbie" Silbermann <[email protected]>

…browser extension (#7726)

* Rewrite React Developer Tools section in tutorial-tic-tac-toe

CodeSandbox doesn't seem to support any platform React Developer Tools as is seen in tutorial.
This section is rewritten to use the browser extension directly on the preview.

* Fixed the preview URL to the codesandbox instance just before this section

* Clarify use vs await

* Refine based on feedback

* Address review comments

Co-authored-by: Tuna <[email protected]>

…505)

* [Suspense] Add 'What activates a Suspense boundary' section

* [Suspense] Clarify image activation wording (review feedback)

* Define "suspense-enabled-framework"

* Update outdated framework-less data fetching note to reference use()

* fix: clarify Suspense boundary activation and fallback behavior

* Add code example

* update styling

* Cleanup caveat

* add link to blogpost

* Replace notes with link to suspense docs

* Tweak caveat

* Update caveat to clarify streaming behavior during server rendering

* Address feedback

* address feedback

* Clarify documentation on Suspense-enabled frameworks

* Update links and wording

* Improve example

* Clarify heading for Suspense-enabled frameworks section

* Restructure page

* Update to be docs compliant and clarify images

* Address review feedback

* Add more suspense examples

* Add more examples

* Clarify image loading behavior during <ViewTransition> updates in Suspense documentation

* Enhance Suspense documentation with additional details on font and image loading during <ViewTransition> updates

* Update

* Enhance Suspense documentation with examples of stylesheet loading behavior and vanilla DOM comparison

* agent review

* Polish Suspense activation examples

- Move Canary badges into section headings and render them icon-only
  in the table of contents
- Replace the image demo's text fallback with a profile skeleton
- Add a combined example coordinating data, a stylesheet, a font, and
  an image behind one boundary, with a plain DOM comparison
- Match skeleton dimensions to the revealed content

* Make the combined example's data delay consistent between runs

* Tune Suspense demo heights, data delay, and DOM comparison wording

* Make section openers stand alone and restore demo timing

* Shrink image demo portraits so both cards fit without layout shift

* Name the resources in the combined section opener

* State the ViewTransition condition in the combined section opener

* Align combined section opener with sibling sections

* Frame font and image waiting as Suspense behavior gated on ViewTransition

* Match the combined section opener to its sibling sections

* Document the experimental defer prop

* Reduce the combined example's data delay

* tweak

* Add dynamic OG images for docs pages

* Match OG card design to existing static images

* Generate OG images statically at build time

* Clean up orphaned lockfile entry

* Show section label on OG cards and guard pages without a card

* Center title and enlarge section label on OG cards

…Leadership Council, and refresh membership.

Co-authored-by: Sebastian "Sebbie" Silbermann <[email protected]>

* Resize long og image text

* address feedback

Please accept my changes for React Alicante and CityJS Athens

…8597)

* Document browser-only rendering

Add the Canary browser API reference, including optional lazy reasons, server bailout reporting, fatal and abort behavior, navigation entries, and onBrowserBailout options for every streaming, resume, and prerender API that supports it.

* Polish browser API docs and add live example

* Document browser with use and Suspense

---------

Co-authored-by: Aurora Scharff <[email protected]>

* Clarify browser-only rendering guidance

* Polish browser-only guidance wording

* Use Canary markers in browser guidance

* Present browser as a use resource

* Polish browser usage labels

* Address browser guidance review

* Clarify browser return value is opaque

* Restore alternative wording

* Restore hydration alternative wording

* Focus use introduction on resources

* Note stable browser cleanup

* Pin matching React Canary versions in Sandpack demos

* Use cached Canary build in Sandpack demos

* Improve browser-only rendering example

* Clarify browser-only example action

* Show browser-only fallback on reload